<!-- 添加管理员 -->
<template>
  <div class="addAdmin-container">
    <TitleBar title="添加管理员"></TitleBar>
    <div class="main">
      <div class="total">
        <BackgroundBox>
          <div class="content">
            <p class="title">
              总数:<span>{{ total }}</span>
            </p>
            <div class="admin item">
              <Icon type="adminIcon"></Icon>
              <p>
                普通管理员: <span>{{ adminNum[1] }}</span>
              </p>
            </div>
            <div class="super item">
              <Icon type="adminIcon"></Icon>
              <p>
                超级管理员: <span>{{ adminNum[0] }}</span>
              </p>
            </div>
          </div>
        </BackgroundBox>
      </div>
      <div class="add">
        <BackgroundBox>
          <el-form
            ref="ruleFormRef"
            style="max-width: 600px; padding: 20px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="头像" prop="name">
              <uploadAvatar @click="getAvatar" ref="avatarDom"></uploadAvatar>
            </el-form-item>
            <el-form-item label="管理员名" prop="Nickname">
              <el-input v-model="ruleForm.Nickname" />
            </el-form-item>
            <el-form-item label="学工号" prop="adminId">
              <el-input v-model="ruleForm.adminId" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <el-form-item label="密码" prop="loginPwd">
              <el-input v-model="ruleForm.loginPwd" />
            </el-form-item>
            <el-form-item label="选择身份" prop="authentication">
              <el-radio-group v-model="ruleForm.authentication" class="ml-4">
                <el-radio value="1" size="large">普通管理员</el-radio>
                <el-radio value="0" size="large">超级管理员</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                注册
              </el-button>
            </el-form-item>
          </el-form>
        </BackgroundBox>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Icon from "@/components/Icon/index.vue";
import uploadAvatar from "@/components/uploadAvatar/index.vue";
import { ref, reactive } from "vue";
import { addAdmin } from "@/api/user.js";
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  adminNum: {
    type: Object,
    default: () => ({}),
  },
});
const avatarDom = ref(); // 上传头像的DOM
const ruleFormRef = ref(); // form的Dom
// 表单对象

const ruleForm = reactive({
  avatar: "",
  Nickname: "",
  adminId: "",
  phone: "",
  loginPwd: "",
  authentication: "",
});
// 获取头像
const getAvatar = (data) => {
  ruleForm.avatar = data;
};
const rules = reactive({
  Nickname: [{ required: true, message: "请输入名称", trigger: "blur" }],
  adminId: [{ required: true, message: "请输入学工号", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern:
        /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
      message: "手机号不符合规则",
      trigger: "blur",
    },
  ],
  loginPwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 10, message: "6-10位", trigger: "blur" },
  ],
  authentication: [
    { required: true, message: "请选择管理员权限", trigger: "blur" },
  ],
});
// 注册
const emit = defineEmits(["submitAddAdmin"])
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      const { data } = await addAdmin(ruleForm);
      if (data) {
        ElMessage({
          message: "注册成功",
          type: "success",
        });
        formEl.resetFields()
        avatarDom.value.cleanUp()
        emit("submitAddAdmin")
      }
     
    } else {
      
      return false;
      
    }
  });
};
</script>
  
<style lang="less" scoped>
@import "@/styles/var.less";
.addAdmin-container {
  width: 100%;
  .main {
    display: flex;
    height: 500px;
    width: 100%;
    justify-content: space-between;

    .total {
      flex: 1;
      padding-right: 20px;
      position: relative;
      .content {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 20px;
        span {
          margin-left: 5px;
        }
        .title {
          font-size: 1.5em;
          font-weight: bold;
        }
      }
      .item {
        display: flex;
        height: 50px;
        width: 100%;
        background: red;
        line-height: 50px;
        margin: 10px 0;
        font-size: 1em;
        color: @white;
        padding: 0 10px;
        border-radius: 5px;
        .icon-container {
          margin-right: 5px;
        }
        &.admin {
          background-color: @primary;
        }
      }
    }
    .add {
      flex: 3;
      .avatar {
        display: flex;
        margin-bottom: 20px;
        span {
          margin-right: 10px;
        }
      }
    }
  }
  .uploadAvatar-container {
    width: 100px;
    height: 100px;
  }
}
</style>
